<!--  -->
<template>
  
  <div class="background">
    <div class="container">
      <el-dialog title="注册用户" :visible.sync="dialogFormVisible" width="30%" >
        <el-form :model="form" >
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input  v-model="form.username"  style="width:240px;" ></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input v-model="form.password" style="width:240px;" ></el-input>
          </el-form-item>
          <el-form-item label="root密码" label-width="120px" style="width:240px;" >
            <el-input v-model="form.veuftcode" ></el-input>
          </el-form-item>
          <el-form-item label="验证码" :label-width="formLabelWidth">
            <el-input v-model="form.code" style="width:150px;margin-right:10px;"></el-input><img
              :src="captchaUrl" alt="" style="width:90px; height:45px;vertical-align:bottom;" @click="imgClick">
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogFormVisible = true;register()">注册</el-button>
        </div>
      </el-dialog>
      <el-form ref="loginForm" :model="loginForm" class="loginContainer" :rules="rules">
        <h3 class="loginTitle">进销存系统登陆</h3>
        <el-form-item prop="username">
          <el-input type="text" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input type="text" v-model="loginForm.code" placeholder="请输入验证码" style="width:250px;margin-right:10px;">
          </el-input>
          <img :src="captchaUrl" alt="" style="width:90px; height:45px;vertical-align:bottom;" @click="imgClick">
        </el-form-item>
        <el-checkbox v-model="checked" class="loginRemember">记住我</el-checkbox>
        <el-button type="text" class="register" @click="dialogFormVisible = true;">注册</el-button>
        <el-button type="primary" style="width: 100%;" @click="submitLogin" @keyup.enter.native="handleSearchMember"
          class="login">登录</el-button>
      </el-form>
    </div>
  </div>
</template>
<script>
import {login,getImage} from '@/api/api.js';
import axios from 'axios'
export default {
  props:{
    username:String
  },
  data() {
    return {
      status_code: '',
      formLabelWidth: '120px',
      checked: false,
      captchaUrl: '',
      dialogFormVisible: false,
      form: {
        username: '',
        password: '',
        code: '',
        veuftcode: ''
      },
      loginForm: {
        username: '',
        password: '',
        code: '',
        loginIP:''
      },
      statusCode: '',
      token: '',
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      }
    };
  },

  components: {},

  computed: {},
mounted(){
     
},
  created() {
    const that = this;
    document.addEventListener('keydown', that.handleWatchEnter);
    getImage().then(res => {
      console.log(res.data)
      this.captchaUrl = res.data
    })
  },

  methods: {
 
    getUsername(){
      
    },
    handleWatchEnter(e) {
      var key = window.event ? e.keyCode : e.which;
      if (key === 13) {
        this.submitLogin()
      }
    },
    submitLogin() {
      if (this.loginForm.username && this.loginForm.password && (this.loginForm.code.length == 4)) {
        login(this.loginForm).then(res => {
          console.log(res.data);
          this.statusCode = res.data.code
          this.captchaUrl = res.data.codeImg
          this.token = res.data.token
          this.valiDate1()
          
        })
      } else {
        this.$message({
          message: '请输入完整字段！',
          type: 'warning',
          duration: 1500
        })
      }
    },
    //出现了异步问题
    // submitLogin() {
    //   this.valiDate()
    // },
    imgClick() {
      getImage().then(res => {
        console.log(res.data)
        this.captchaUrl = res.data
      })
    }, 
    valiDate1() {
      if (this.statusCode == 200) {
        this.$message({
          message: '登录成功！',
          type: 'success',
          duration: 1500
        }),
        localStorage.setItem('token', this.token);
        sessionStorage.setItem('token', this.token)
        sessionStorage.setItem('username', this.loginForm.username)

        this.$store.commit('getUsername',this.loginForm.username)
        this.$router.push('/main')

      } if (this.statusCode == 201) {
        this.$message({
          message: '用户名或密码错误',
          type: 'error',
          duration: 1500
        })
      } if (this.statusCode == 301) {
        this.$message({
          message: '验证码错误，请重新输入',
          type: 'error',
          duration: 1500
        })

      }
    }, 
    register() {
      axios.post("http://www.changbaiqi.com:8989/user/register", this.form).then(res => {
        this.status_code = res.data.status_code
        console.log(res.data)
        if (this.status_code == '200') {

          this.$message({
            message: '注册成功！',
            type: 'success',
            duration: 1500
          })
        } else if (this.status_code == '201') {

          this.$message({
            message: '注册失败',
            type: 'error',
            duration: 1500
          })
        }
        else if (res.statuscode == '202') {
          this.$message({
            message: '超级管理员密码错误！',
            type: 'error',
            duration: 1500
          })
        }
      });
    }, 
   

  }
}

</script>
<style  scoped>
.loginContainer {
  border-radius: 15px;
  background: #fff;
  background-clip: padding-box;

  width: 350px;
  padding: 15px 35px 15px 35px;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.loginTitle {
  margin: 0px auto 40px auto;
  text-align: center;
}

.loginRemember {
  text-align: left;
  margin: 0px 0px 15px 0px;

}

.register {
  float: right;
  padding: 5.5px 15px 0 0;

}

.background {
  background: url('../assets/images/loginbg.png');
  height: 100vh;
}

.container {
  padding: 25vh 75vh;
}
</style>